﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="stylesheet" href="/css/amazeui.min.css" />
    
    <style>
        ::-webkit-scrollbar {
            width: 8px; /*宽度对垂直滚动条有效*/
            height: 8px; /*高度对水平滚动条有效*/
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 8px;
            background-color: #efefef;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #aaa;
        }


        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            background-color: #f5e1ba;
        }

        .pageBox {
            padding-left: 250px;
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }

        .nav {
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 100%;
            overflow-y: auto;
            border-right: 1px solid #ddd;
            background-color: #2a2a2a;
            color: #999;
            font-size: 14px;
            line-height: 25px;
        }

            .nav::-webkit-scrollbar {
                width: 5px; /*宽度对垂直滚动条有效*/
                background-color: #F5F5F5;
            }

            .nav::-webkit-scrollbar-thumb {
                border-radius: 5px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: green;
            }


        .nav-menu a {
            display: block;
            color: #fff;
            padding: 10px 15px;
            color: #999;
            transition: background-color linear 0.3s;
        }

            .nav-menu a:hover {
                background-color: #f49484;
                color: #fff;
            }

        .nav .home {
            background-color: #e78170;
            color: #fff;
        }

        .nav-user {
            position: absolute;
            bottom: 5px;
            width: 100%;
        }

            .nav-user a {
                display: block;
                padding: 10px 15px;
                color: #999;
            }

                .nav-user a:hover {
                    color: #fff;
                }

        .nav .icon {
            font-size: 18px;
        }

        .user-history li > a {
            color: #999;
            background-color: transparent;
            padding: 6px;
            font-size: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .user-history li > a:hover {
                color: #fff;
            }

        .user-history li {
            background-color: transparent;
            border-color: #555;
        }

        .user-history h3 {
            padding: 10px 15px;
            margin: 0;
        }

        .user-history .am-list {
            padding-left: 20px;
            margin-top: 0;
        }

        .ContentBox {
            height: 100%;
            overflow-y: auto;
        }
        #chapterBox {
            width: 900px;
            margin: 20px auto;
        } 
        .ContentBox .chapter {           
            background-color: #fff2d9;
            margin: 20px auto;
            padding: 20px;
            font-size: 16px;
        }
            .ContentBox .chapterTitle {
                font-size: 18px;
            }
        
         #loading {
            margin: 20px auto;
            font-size: 32px;
            display:none;
        }
        .pagetotop {
            position: fixed;
            right: 50px;
            bottom: 50px;
            z-index: 999;
            display: none;
            color:#fff;
            background-color: rgba(0,0,0,0.6);
        }
        /*=================================*/
        .chapterItem a {
            padding: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #24272c;
            border-bottom: 1px solid #e4e1da;
        }
            .chapterItem a:hover {
                color: #ac2231;
            }
        .listHeader h1{
            display:inline-block;font-size:32px;font-weight:normal;color:#303030;padding:10px 0;margin:0;
        }
        .listHeader span {
            padding-left:15px;font-size:14px;
        }
        .listHeader {
           box-shadow:rgba(0,0,0,0.5) 0 10px 8px;margin-bottom:30px;
        }

    </style>
</head>
<body>
    <div class="pageBox">
        <div class="nav">
            <div class="nav-menu">
                <a class="home" href="#">
                    <span class="am-icon-home icon"></span>
                    首页
                </a>
                <a href="#">
                    <span class="am-icon-list icon"></span>
                    章节目录
                </a>
            </div>
            <div class="user-history am-margin-top-lg">
                <h3>
                    <span class="am-icon-history icon"></span>
                    浏览历史
                </h3>
                <ul class="am-list">
                    <li>
                        <a href="#">我欲封天-第一章 书生孟浩书生孟浩书生孟浩书生孟浩</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第二章 靠山宗</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第四章 一面铜镜</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第八章 赵武刚</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第十章 王腾飞</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第十三章 大汉曹阳</a>
                    </li>
                </ul>
            </div>

            <div class="nav-user">
                <a>
                    <span class="am-icon-moon-o icon"></span>
                    显示模式
                </a>
                <a>
                    <span class="am-icon-sign-in icon"></span>
                    登录
                </a>
            </div>

        </div>
        <div class="ContentBox">
            <div id="chapterBox">
                <div class="chapter">
                    <div class="listHeader am-text-center">
                        <h1>我欲封天</h1><span>作者：耳根</span>    
                        <a class="am-margin-left am-btn am-btn-danger am-btn-xs">倒叙<i class="am-icon-long-arrow-down"></i></a>                   
                    </div>                    
                    <div class="listBox">                        
                        <div class="am-g am-text-sm chapterItem">
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                序章 大荒
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第一章 朝气蓬勃
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第十章 祖器
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第三十二章 此指当日辱我，今日废掉！此指当日辱我
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第一章 朝气蓬勃
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第十章 祖器
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第三十二章 此指当日辱我，今日废掉！
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第三十二章 此指当日辱我，今日废掉！
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第一章 朝气蓬勃
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第十章 祖器
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第三十二章 此指当日辱我，今日废掉！
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第三十二章 此指当日辱我，今日废掉！
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第一章 朝气蓬勃
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第十章 祖器
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第三十二章 此指当日辱我，今日废掉！
                            </a>
                            <a class="am-u-sm-12 am-u-md-4" href="novelChapter.html">
                                第一章 朝气蓬勃
                            </a>
                            <a class="am-u-sm-12 am-u-md-4 am-u-end" href="novelChapter.html">
                                第十章 祖器
                            </a>
                        </div>
                    </div>
                </div>
               
            </div>
            
            <div id="loading" class="am-text-center">
                <i class="am-icon-spinner am-icon-spin"></i>
                <p class="am-text-sm am-margin-top-0">努力加载中...</p>
            </div>
        </div>
        <a class="am-btn pagetotop" >
            <span class="am-icon-angle-double-up am-text-lg"></span>
            <p class="am-margin-0 am-text-xs">置顶</p>
        </a>
    </div>
       
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/amazeui.min.js"></script>
    <script>
        $(function () {
            $(".ContentBox").scroll(function () {
                var nowVal = $(".ContentBox").scrollTop();
                var parentHigh = $(".ContentBox").height();
                var boxHigh = $("#chapterBox").height();
                
                //置顶显示
                if (nowVal > 200) {
                    if ($(".pagetotop").is(':hidden')) {
                        $(".pagetotop").show();
                    }

                } else {
                    $(".pagetotop").hide();
                }
                //如果滚动条到底，因为margin-top和margin-bottom个20px
                if(boxHigh-nowVal+39<=parentHigh)
                {                    
                    loadChapter();
                }
            })
            //置顶按钮
            $(".pagetotop").click(function () {                
                $(".ContentBox").animate({ scrollTop: 0 }, 300);
            })

        })


    </script>
</body>
</html>
